<template>
    <div class="table-box">
        <ProTable ref="proTable" :requestApi="api.getList" :columns="columns">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"
                    @click="onBatchRemove(scope.selectList)">
                    批量下线
                </el-button>
                <el-button type="danger" :icon="Delete" plain @click="onBatchAllRemove">
                    全部下线
                </el-button>
            </template>
            <!-- 在线状态 slot -->
            <template #online="{ row }">
                <el-tag v-if="row.online === '1'">在线</el-tag>
                <el-tag type="info" v-else>离线</el-tag>
            </template>
            <!-- Expand -->
            <template #expand="scope">
                {{ scope.row }}
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <el-button type="primary" link :icon="Delete" :disabled="scope.row.online !== '1'"
                    @click="onRemove(scope.row)">下线</el-button>
            </template>
        </ProTable>
    </div>
</template>

<script setup lang="tsx" name="session">

import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { CirclePlus, Delete, EditPen, View, Download } from "@element-plus/icons-vue";

import { useHandleData } from "/@/hooks/useHandleData";
import { useDownload } from "/@/hooks/useDownload";

import * as api from "../../../api/system/session";
import columnsFunction from './columns';
import ProTable from "/@/components/ProTable/index.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 自定义渲染头部(使用tsx语法)
const selectable = (row: any) => {
    return row.online === '1'
};

// 获取表头信息
const columns = columnsFunction(selectable);


// 删除用户信息
const onRemove = async (params: any) => {
    await useHandleData(api.remove, { sessionId: params.sessionId }, '下线当前用户信息');
    proTable.value.refresh();
};

// 下线所有用户
const onBatchAllRemove = async () => {
    await useHandleData(api.removeAllOnline, {}, '下线所有用户信息');
    proTable.value.refresh();
}

// 批量删除用户信息
const onBatchRemove = async (selectList: any[]) => {
    console.log(selectList)
    const sessionIds = [];
    for (let select of selectList) {
        if (select.online === '1') {
            sessionIds.push(select.sessionId)
        }
    }
    if (sessionIds.length > 0) {
        await useHandleData(api.remove, { sessionId: sessionIds.join(',') }, "批量下线选择用户信息");
        proTable.value.refresh();
    } else {
        ElMessage.warning({ message: '在线用户不存在' });
    }
};
</script>
